<template>
	<view :data-theme="theme">
		<view class="top">
			<image src="./top.png"></image>
			<view class="top-view">
				<view class="top-view-text1">“</view>
				<view class="top-view-text2">氢友圈子</view>
				<view class="top-view-text3">
					<text style="margin-right: 47rpx;">{{totalData.directUserTotal}} 直邀氢友</text>
					<text>{{totalData.teamUserTotal}} 团队氢友</text>
				</view>
			</view>
		</view>
		<view v-if="identity" class="search-identity">
			<view class="search-identity-body">
				<view :class="level==1?'on':''" class="search-identity-item" @click="level=1">平台会员</view>
				<view :class="level==2?'on':''" class="search-identity-item" @click="level=2">水站代理</view>
				<view :class="level==3?'on':''" class="search-identity-item" @click="level=3">区县代理</view>
				<view :class="level==4?'on':''" class="search-identity-item" @click="level=4">市级代理</view>
				<view :class="level==5?'on':''" class="search-identity-item" @click="level=5">省级代理</view>
			</view>
			<view class="search-identity-btn">
				<view class="search-identity-btn2" @click="search">确认</view>
			</view>
		</view>
		<view class="search">
			<view class="search-input">
				<text class="iconfont icon-sousuo6"></text>
				<input type='number' placeholder="输入氢友邀请码或手机号" v-model='keyword' @confirm="search"></input>
			</view>
			<view class="search-filter" @click="identity = !identity">
				<text>身份筛选</text>
				<text class="iconfont2 icon2-shaixuan" style="font-size: 20rpx;"></text>
			</view>
		</view>
		<view class="item" v-if="userInfo.parUser">
			<view class="item-user">
				<image :src="userInfo.parUser.avatar" class="item-user-image"></image>
				<view class="item-msg">
					<view class="item-msg-name">
						<text>{{userInfo.parUser.nickname}}(推荐人)</text>
					</view>
					<view class="item-msg-text1">邀请码：{{userInfo.parUser.investCode}}</view>
					<view class="item-msg-text2">
						<text>手机号：{{userInfo.parUser.phone | phoneStr}}</text>
						<!-- #ifdef H5 -->
						<a :href="'tel:' + userInfo.parUser.phone" style='text-decoration: none;'><text class="iconfont2 icon2-dianhua" style="color: #76cc94;"></text></a>
						<!-- #endif -->
						<!-- #ifdef MP || APP-PLUS -->
						<text class="iconfont2 icon2-dianhua" style="color: #76cc94;" @click="call(userInfo.parUser.phone)"></text>
						<!-- #endif -->
					</view>
					<view class="item-msg-text2">
						<text>注册时间：{{userInfo.parUser.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="item" v-for="(data,index) in userBillList" :key="index">
			<view class="item-user">
				<image :src="data.avatar" class="item-user-image"></image>
				<view class="item-msg">
					<view class="item-msg-name">
						<text>{{data.nickname}}</text>
						<identity :grade="data.grade" :data="data"></identity>
					</view>
					<view class="item-msg-text1">邀请码：{{data.investCode}}</view>
					<view class="item-msg-text2">
						<text>手机号：{{data.phone | phoneStr}}</text>
						<!-- #ifdef H5 -->
						<a :href="'tel:' + data.phone" style='text-decoration: none;'><text class="iconfont2 icon2-dianhua" style="color: #76cc94;"></text></a>
						<!-- #endif -->
						<!-- #ifdef MP || APP-PLUS -->
						<text class="iconfont2 icon2-dianhua" style="color: #76cc94;" @click="call(data.phone)"></text>
						<!-- #endif -->
					</view>
					<view class="item-msg-text2" @click="getDetail(data,index)">
						<text>注册时间：{{data.createTime}}</text>
						<text class="iconfont2 icon2-xiangshang1" v-if="data.xia"></text>
						<text class="iconfont2 icon2-xiangxia1" v-else></text>
					</view>
				</view>
			</view>
			<view class="item-team" v-if="data.detail && data.xia">
				<view class="item-team-num">
					<text>直邀氢友：{{data.detail.directUserTotal}}人</text>
					<text>团队氢友：{{data.detail.teamUserTotal}}人</text>
				</view>
				<view class="item-team-num">
					<text>博士水票：{{data.detail.buyWater}}张</text>
					<text>赠送水票：{{data.detail.giftWater}}张</text>
				</view>
			</view>
			<view class="item-identity" v-if="data.detail && data.xia && (data.detail.waterAgent.length || data.detail.isWaterShopkeeper)">
				<view class="item-identity-title">身份标签</view>
				<view class="item-identity-body">
					<view style="display: flex;margin-bottom: 50rpx;">
						<!-- <identity style='margin-right: 50rpx;'></identity> -->
						<identity grade="2" v-if="data.detail.isWaterShopkeeper"></identity>
					</view>
					<view class="item-identity-page" v-for="(item, key) in data.detail.waterAgent" :index='key'>
						<identity grade="3" v-if="item.level == '3'"></identity>
						<identity grade="4" v-if="item.level == '2'"></identity>
						<identity grade="5" v-if="item.level == '1'"></identity>
						<view class="item-identity-page-text">
							<view class="item-identity-page-text1" v-if="item.level == '3'">{{item.province}}-{{item.city}}-{{item.area}}</view>
							<view class="item-identity-page-text1" v-if="item.level == '2'">{{item.province}}-{{item.city}}</view>
							<view class="item-identity-page-text1" v-if="item.level == '1'">{{item.province}}</view>
							<view class="item-identity-page-text1">代理时间：{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-remark" v-if="data.detail && data.xia">
				<view class="item-remark-title">
					<text>备注信息</text>
					<!-- #ifndef H5 -->
					<text style="color: #3A84F0;" class='copy' @tap='copy(data.detail.mark)'>复制内容</text>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<text style="color: #3A84F0;" class='copy copy-data' :data-clipboard-text="data.detail.mark">复制内容</text>
					<!-- #endif -->
				</view>
				<textarea :value="data.detail.mark" @blur="(e)=>{setRemark(e,index)}" class="item-remark-textarea" placeholder='请输入备注内容（500字以内）' name="comment" placeholder-class='placeholder'></textarea>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		teamTotal,
		teamList,
		userDetailById,
		teamMark,
	} from '@/api/user.js';
	import identity from './identity.vue'
	import emptyPage from '@/components/emptyPage.vue'
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	let app = getApp();
	export default {
		components: {
			emptyPage,identity
		},
		filters: {
			phoneStr(val) {
				return val.substring(0,3)+'****'+val.substring(7,11)
			},
		},
		data() {
			return {
				keyword: '',
				level: '',
				loading: false,
				loadend: false,
				identity: false,
				page: 1,
				limit: 20,
				theme:app.globalData.theme,
				totalData: {},
				userBillList: [],
			};
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		watch:{
			isLogin:{
				
			}
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {
				const clipboard = new ClipboardJS(".copy-data");
				clipboard.on("success", () => {
					this.$util.Tips({
						title: '复制成功'
					});
				});
			});
			// #endif
			 
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getTeamList();
		},
		onShow() {
			
		},
		onLoad() {
			this.getTeamTotal()
			this.getTeamList();
		},
		methods: {
			search() {
				this.loading = false
				this.identity = false
				this.loadend = false
				this.page= 1
				this.userBillList = []
				this.getTeamList();
			},
			/**
			 * 
			 * 复制
			 */
			// #ifndef H5
			copy: function(text) {
				let that = this;
				uni.setClipboardData({
					data: text
				});
			},
			// #endif
			setRemark(e,index) {
				let model = this.userBillList[index]
				teamMark({
					mark: e.detail.value,
					uid: model.uid
				}).then(res => {
					model.detail.mark = e.detail.value
					this.$set(this.userBillList, index, model)
					this.$util.Tips({title:'编辑成功'})
				})
			},
			getDetail(data, index) {
				const model = this.userBillList[index]
				if (model.detail) {
					model.xia = !model.xia
					this.$set(this.userBillList, index, model)
				} else {
					userDetailById(model.uid).then(res => {
						model.detail = res.data
						model.xia = true
						this.$set(this.userBillList, index, model)
					})
				}
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			getTeamList: function() {
				let that = this;
				if (that.loadend) return;
			
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "";
				let data = {
					page: that.page,
					level: that.level,
					keyword: that.keyword,
					limit: that.limit,
				}
				teamList(data).then(function(res) {
					let list = res.data.list ? res.data.list : [],
					loadend = res.data.totalPage <= that.page;
					if (that.page == 1) {
						that.userBillList = list
					} else {
						that.userBillList = that.userBillList.concat(list)
					}
					console.log(that.userBillList)
			    that.$set(that, 'userBillList', that.userBillList);
					that.page += 1;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "我也是有底线的~" : "加载更多";
				}, function(res) {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
			getTeamTotal() {
				teamTotal().then(res => {
					console.log(res)
					this.totalData = res.data || {}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.search-identity-body{
		display: flex;
		flex-wrap: wrap;
		padding-left: 28rpx;
		width: 100vw;
		padding-bottom: 125rpx;
		background: #FFFFFF;
		
	}
	.search-identity-btn{
		background: #FFFFFF;
		width: 100vw;
	}
	.search-identity-btn2{
		width: 100%;
		height: 96rpx;
		display: flex;
		justify-content: center;
		color: #fff;
		align-items: center;
		@include main_bg_color(theme);
	}
	.search-identity-item{
		margin-top: 30rpx;
		margin-right: 30rpx;
		width: 210rpx;
		height: 82rpx;
		background: #F5F6F9;
		border-radius: 51rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333333;
	}
	.on{
		@include main_bg_color(theme);
		color: #fff;
	}
	.search-identity{
		position: fixed;
		bottom: 0%;
		width: 100vw;
		background: rgba(0,0,0,0.7);
		top: 575rpx;
		z-index: 9;
		
	}
	.item-remark-title{
		font-size: 28rpx;
		color: #333333;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.placeholder {
		color: #979797;
	}
	
	.item-remark-textarea {
		width: 630rpx;
		margin-top: 20rpx;
		height: 120rpx;
		background: #F8F8FA;
		padding: 40rpx 24rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.item-identity-page{
		display: flex;
		margin-bottom: 32rpx;
		&-text{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
		}
		&-text1{
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 20rpx;
			line-height: 40rpx;
		}
	}
	.item-identity{
		width: 630rpx;
		&-body{
			width: 630rpx;
			background: #F8F8FA;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;
		}
		&-title{
			font-size: 28rpx;
			color: #333333;
			margin: 40rpx 0 20rpx 0;
		}
	}
	.item-team{
		margin-top: 30rpx;
		padding: 27rpx 40rpx;
		width: 630rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: #F8F8FA;
		border-radius: 20rpx;
		&-num{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #333333;
		}
	}
	.item-user{
		display: flex;
		&-image{
			width: 100rpx;
			height: 100rpx;
			display: block;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}
	}
	.item-msg-text2{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #505050;
	}
	.item-msg-text1{
		font-size: 24rpx;
		color: #9D9D9D;
		margin-top: 20rpx;
	}
	.item-msg{
		flex:1;
		&-name{
			display: flex;
			align-items: center;
			text{
				font-size: 34rpx;
				color: #333333;
				margin-right: 12rpx;
			}
		}
	}
	.item {
		width: 690rpx;
		height: auto;
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 20rpx auto;
		
	}
	.search{
		margin-top: -30rpx;
		margin-bottom: 30rpx;
		width: 750rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		border-radius: 20rpx 20rpx 0px 0px;
		z-index: 1;
		position: relative;
		padding: 50rpx 0 38rpx 0;
		&-filter{
			font-size: 24rpx;
			color: #333333;
			display: flex;
			align-items: center;
			margin-left: 26rpx;
		}
		&-input{
			margin-left: 30rpx;
			width: 545rpx;
			padding: 0 40rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			border: 2rpx solid #EDEDED;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #979797;
			input{
				flex: 1;
				margin-left: 12rpx;
			}
		}
	}
	.top{
		position: relative;
		image{
			width: 750rpx;
			height: 442rpx;
			display: block;
			position: relative;
		}
		.top-view{
			position: absolute;
			bottom: 89rpx;
			left: 36rpx;
			&-text1{
				font-size: 72rpx;
				color: #FFFFFF;
			}
			&-text2{
				margin-bottom: 20rpx;
				font-size: 60rpx;
				color: #FFFFFF;
			}
			&-text3{
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
